<template>
  <div class="index">
    <div class="top">
      <van-icon name="arrow-left" size="30" class="da"/>
      <span>首页</span>
    </div>
    <div class="renwen">
      <van-button color="#7232dd" @click="add">新增任务</van-button>
    </div>
    <div class="summary">
      <span>全部任务({{ store.tasklist.length }})</span>
      <span>已完成({{ store.tasklist.length - store.unFinishedCount }})</span>
      <span class="unfinished">未完成( {{ store.unFinishedCount }} )</span>
  </div>
  <div class="wu">任务列表 </div>
  <div class="tasklist">
    <!-- <h1> {{title}} </h1> -->
    <div :class="{task:true, unfinished: !item.status }" v-for="(item,index) in tasklist" :key="index">
      <input :checked="item.status" type="checkbox" @click="change(item.id)">
      <span> {{item.name}} </span>
      <span @click="del(item.id)">删除</span>
    </div>
    <div class="empty" v-show="tasklist.length==0" style="color:red">任务列表为空，请添加一个任务！</div>
    
  </div>

  </div>
  
</template>

<script setup>
import {ref} from "vue"
import { useTasklistStore } from "../stores/tasklist";
import { useRouter } from "vue-router";


var $router=useRouter();
var add=()=>{
  $router.push('./inputAdd')
}
var store=useTasklistStore()
var tasklist=ref(store.tasklist)
var change=(id)=>{
  store.changeStatus(id)
};
var del=(id)=>{
  store.deleteTask(id)
}




</script>
<style scoped>
.top{
  height: 40px;
  text-align: center;
  margin: 10px;
}
.top .da{
  float: left;
}
.top span{
  font-weight: 700;
  font-size: 22px;
}
.renwen{
  margin: 10px;
}
.summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.summary span{
  background-color: rgb(33, 146, 216);
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  padding: 0 20px;
}
.summary span.unfinished{
  background-color: red;
}
.wu{
  margin: 10px;
  font-weight: 700;
}
.tasklist .task{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgb(33, 146, 216);
  color: white;
  margin: 10px;
}
.tasklist .task.unfinished{
  background-color: red;
}
</style>
